<template>
  <!-- 核销人管理 -->
<div class="root">

  <div class="cha">

    <div class="input1">
      <el-input v-model="obj.idorname" placeholder="请输入查询内容" />
    </div>

    <!-- 按钮 -->
    <div>
      <el-button type="primary" @click="cha">查询</el-button>
      <el-button type="success" @click="add">添加</el-button>
      <el-button type="danger" @click="delAll">批量删除</el-button>
    </div>

  </div>

      <!-- 表格 -->
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" height="540" border @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column align="center" property="reviewer_name" label="核销人姓名"  width="120" />
    <el-table-column align="center" property="mobile" label="手机号" width="120" />
    <el-table-column align="center" property="department" label="部门" />
    <el-table-column align="center" property="job" label="职务" />

    <el-table-column property="is_use" label="是否启用" width="90">
      <template #default="scope">
        <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.is_use" class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          @change="whether({id:scope.row.id,is_use:scope.row.is_use})" />
      </template>
    </el-table-column>

    <el-table-column label="操作" width="250">
      <template #default="scope">
        <el-button type="success" @click="xiugai(scope.row)">修改</el-button>
        <el-popconfirm title="确认删除该数据吗？" @confirm="del(scope.row.id)">
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

  <!--  分页 -->
  <FenYe :total="totals" @getChildData='getChildData'></FenYe>


</div>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue';
import { reviewer,del1,changestatus } from '../../api/login/index'
import { ElMessage } from "element-plus";
import router from "../../router/router";// 路由跳转
import FenYe from '../../components/fen ye/FenYe.vue' //分页组件


// 列表数据
let tableData:any = reactive([])
let totals =ref(0)  // 一共多少条数据
const obj = reactive({  //参数
  page: '1',
  pageSize: '10',
  idorname: ''  //查询要的
})
let getList = async () => {
  let res :any = await reviewer(obj)
  console.log(res);
  // 赋值
  // 防止往下追加
  tableData.length = 0
  tableData.push(...res.data)
  // 一共多少条数据
  totals.value = res.total
}
getList() //接口调用


// 是否启用
let whether = async (data:any) => {
  console.log(data);
  let res:any = await changestatus({id:data.id, is_use:data.is_use==1? true:false})
  console.log(res);
  if(res.code=== '00000'){
    ElMessage({
      message: "修改成功",
      type: "success",
    });
  }else {
    ElMessage({
      message: "修改失败，请重试",
      type: "error",
    });
  }
}


// 分页
const getChildData = (val:any) => {
  console.log(111, val)
  obj.page = val.page
  obj.pageSize = val.pageSize
  getList()
}

// 单删
let del = async (id:number) =>{
  let obj2 = { //参数
    id:id
  }
  let res:any = await del1(obj2)
  console.log(res);
  if(res.code === '00000'){
    getList() //刷新列表
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  }
}


// 批删 点击多选框获取到id
let multipleSelection:any = ref([])
const handleSelectionChange = (val: any) => {
  // 处理数据 获取到选中的id
  multipleSelection.value = val.map((item:any) => item.id)
  console.log(multipleSelection.value)
}
// 批删 接口
let delAll = async() =>{
  let ids:any = []
  ids = multipleSelection.value //多选框获取到id
  let res :any = await del1({id:ids})
  console.log(res);
  if(res.code === '00000'){
    getList() //刷新列表
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  }else{
    ElMessage({
      message: "请先选择你要删除的数据",
      type: "error",
    });
  }
}


// 点击查询
let cha = () =>{
  getList() //刷新列表
}


// 添加
let add = () =>{
  router.push("addtianjia"); //跳转页面
}


// 修改
  let xiugai = (data:any) =>{
    // console.log(data);
    let {reviewer_name,openid,mobile,job,department,id} = data
    router.push({path:'addxiugai', query: {reviewer_name,openid,mobile,job,department,id}})
  }

</script>

<style scoped lang='less'>
  .input1{
    width: 230px;
    margin-right: 20px;
  }
  .cha{
    display: flex;
    margin-bottom: 23px;
  }
</style>